import 'package:flutter/material.dart';
import 'package:study_demo/generated/assets.dart';

class FlipCard extends StatefulWidget {
  @override
  _FlipCardState createState() => _FlipCardState();
}

class _FlipCardState extends State<FlipCard> with TickerProviderStateMixin {
  late AnimationController _controller1;
  late AnimationController _controller2;
  late Animation<double> _animation1;
  late Animation<double> _animation2;
  bool _isFrontVisible1 = true; // 当前显示的是否是正面
  bool _isFrontVisible2 = true;

  @override
  void initState() {
    super.initState();
    _controller1 = AnimationController(
      duration: Duration(milliseconds: 1200),
      vsync: this,
    );

    _controller2 = AnimationController(
      duration: Duration(milliseconds: 1200),
      vsync: this,
    );

    _animation1 = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
      parent: _controller1,
      curve: Curves.easeInOut,
    ));

    _animation2 = Tween(begin: 0.0, end: 3.14159).animate(CurvedAnimation(
      parent: _controller2,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  void _flipCard1() {
    if (_isFrontVisible1) {
      _controller1.forward();
    } else {
      _controller1.reverse();
    }
    _isFrontVisible1 = !_isFrontVisible1;
  }

  void _flipCard2() {
    if (_isFrontVisible2) {
      _controller2.forward();
    } else {
      _controller2.reverse();
    }
    _isFrontVisible2 = !_isFrontVisible2;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('卡片翻转效果')),
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
                onTap: _flipCard1,
                child: Container(
                  width: 210,
                  child: AnimatedBuilder(
                    animation: _animation1,
                    builder: (context, child) {
                      final angle = _animation1.value * 3.14159; // 翻转角度
                      final isFrontVisible = angle <= 3.14159 / 2;

                      return Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.001) // 添加透视效果
                          ..rotateY(angle),
                        alignment: Alignment.center,
                        child: Stack(
                          children: [
                            isFrontVisible
                                ? Transform(
                                    transform: Matrix4.identity()
                                      ..setEntry(3, 2, 0.001)
                                      ..rotateY(isFrontVisible ? 0 : 3.14159),
                                    alignment: Alignment.center,
                                    child: _buildFrontCard1(),
                                  )
                                :
                                // 背面卡片
                                Transform(
                                    transform: Matrix4.identity()
                                      ..setEntry(3, 2, 0.001)
                                      ..rotateY(isFrontVisible ? 0 : -3.14159),
                                    alignment: Alignment.center,
                                    child: _buildBackCard1(),
                                  ),
                          ],
                        ),
                      );
                    },
                  ),
                )),
            SizedBox(width: 50),
            GestureDetector(
                onTap: _flipCard2,
                child: Container(
                  width: 210,
                  child: AnimatedBuilder(
                    animation: _animation2,
                    builder: (context, child) {
                      final angle = _animation2.value; // 翻转角度
                      final isFrontVisible = angle <= 3.14159 / 2;

                      return Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.001) // 添加透视效果
                          ..rotateY(angle),
                        alignment: Alignment.center,
                        child: Stack(
                          children: [
                            isFrontVisible
                                ? Transform(
                                    transform: Matrix4.identity()
                                      ..setEntry(3, 2, 0.001)
                                      ..rotateY(0),
                                    alignment: Alignment.center,
                                    child: _buildFrontCard2(),
                                  )
                                :
                                // 背面卡片
                                Transform(
                                    transform: Matrix4.identity()
                                      ..setEntry(3, 2, 0.001)
                                      ..rotateY(0),
                                    alignment: Alignment.center,
                                    child: _buildBackCard2(),
                                  ),
                          ],
                        ),
                      );
                    },
                  ),
                ))
          ],
        )));
  }

  Widget _buildFrontCard1() {
    return Container(
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage(Assets.imagesWbhh)),
        borderRadius: BorderRadius.circular(12),
      ),
      alignment: Alignment.center,
    );
  }

  Widget _buildFrontCard2() {
    return Container(
      width: 200,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12),
      ),
      alignment: Alignment.center,
      child: Text(
        '福卡正面',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }

  Widget _buildBackCard1() {
    return Container(
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage(Assets.imagesSuperStar)),
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }

  Widget _buildBackCard2() {
    return Container(
      width: 200,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(12),
      ),
      alignment: Alignment.center,
      child: Text(
        '福卡背面',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}
